<template>
    <div class="register-container">
        <div class="registerbox">
            <el-card class="rgba(255, 255, 255, 0)">
                <template #header>
                    注册
                </template>
                <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef">
                    <el-form-item label="账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户:" prop="username">
                        <el-input v-model="registerForm.username" placeholder="输入用户昵称，后续用作登录"></el-input>
                    </el-form-item>
                    <!-- 身份 -->
                    <el-form-item label="身&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份:" prop="identity">
                        <el-select v-model="registerForm.identity" placeholder="请选择">
                            <el-option label="作者" value="2"></el-option>
                            <el-option label="用户" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 手机号 -->
                     <el-form-item label="&nbsp;&nbsp;手&nbsp;&nbsp;机&nbsp;&nbsp;号:" prop="phone">
                        <el-input type="" v-model="registerForm.phone" placeholder="输入用户手机号"></el-input>
                     </el-form-item>
                    <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:" prop="password">
                        <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码:" prop="passwordConfirm">
                        <el-input type="password" v-model="registerForm.passwordConfirm" placeholder="请确认密码,两次一致!!"></el-input>
                    </el-form-item>
                    <!-- 注册按钮 -->
                    <el-button type="primary" @click="registersave">注册</el-button>
                </el-form>
                <p class="register-link">
                    <router-link to="/">已有账号？去登录</router-link>
                </p>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import router from '@/router';
import { ElMessage } from 'element-plus';

const registerForm = ref({
    username: '',
    password: '',
    passwordConfirm: '',
    identity: '',
    userphone:''
});

const registerRules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20', trigger: 'blur' }
    ],
    passwordConfirm: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20', trigger: 'blur' }
    ],
    identity: [
        { required: true, message: '请选择身份', trigger: 'change' }
    ],
    userphone:[
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
    ]
});

const registerFormRef = ref(null);

const registersave = () => {
    // 验证表单
    registerFormRef.value.validate((valid) => {
        if (valid) {
            if (registerForm.value.password !== registerForm.value.passwordConfirm) {
                ElMessage.error('密码不一致');
            } else {
              // 调试数据
                    // ElMessage.success('注册成功');
                    // ElMessage.success(registerForm.value.username)
                    // ElMessage.success(registerForm.value.password)
                    // ElMessage.success(registerForm.value.identity)
                    // ElMessage.success(registerForm.value.phone)
              //
                axios({
                    method: 'POST',
                    url: '/api/register',
                    params: {
                        username: registerForm.value.username,
                        password: registerForm.value.password,
                        identity: registerForm.value.identity,
                        userphone: registerForm.value.phone
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage.success('注册成功');
                        router.push('/');
                    } else {
                        ElMessage.error('注册失败');
                    }
                }).catch((error) => {
                    console.error(error);
                    ElMessage.error('注册失败，请稍后重试');
                });
            }
        } else {
            ElMessage.error('表单填写有误，请检查');
        }
    });
};
</script>

<style scoped>
.register-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("@/assets/images/loginbg.jpg") no-repeat center center fixed;
    background-size: cover;
}

.registerbox {
    z-index: 1;
    width: 400px;
    margin: 15% 40%;
    background-color: rgba(255, 255, 255, 0.7);
}

.el-card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 保持 el-card 内容区域的可读性 */
.el-card__body {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 8px;
}

/* 输入框透明 */
.el-input__inner {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 输入框聚焦时的样式 */
.el-input__inner:focus {
    border-color: #409EFF !important;
}

/* 选择框透明 */
.el-select .el-input__inner {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 选择框聚焦时的样式 */
.el-select .el-input__inner:focus {
    border-color: #409EFF !important;
}

/* 按钮透明 */
.el-button {
    background-color: rgba(64, 158, 255, 0.7) !important;
    border-color: rgba(64, 158, 255, 0.7) !important;
}

/* 按钮悬停时的样式 */
.el-button:hover {
    background-color: rgba(64, 158, 255, 0.9) !important;
}

.el-card__header {
    font-size: 20px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
}

.el-form-item__content button {
    margin-right: 10px;
}

.register-link {
    text-align: center;
}
</style>